<template>
  <div class="view">
    <Panel title="成绩数据大屏">
      <el-button class="button" @click="clickJump()" type="primary">{{ title1 }}</el-button>
      <div style="padding: 30px">
        <span class="title">{{ title2 }}</span>
        <div id="work" class="box"></div>
        <span class="title">{{ title3 }}</span>
        <div id="exam" class="box"></div>
      </div>
    </Panel>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'CourseRanking',
  data () {
    return {
      type: 0,
      title1: '班级情况',
      title2: '作业完成情况',
      title3: '考试成绩'
    }
  },
  created () {
  },
  mounted () {
    this.getExam()
    this.getWork()
  },
  methods: {
    clickJump () {
      if (this.type === 0) {
        this.type = 1
        this.title1 = '个人情况'
        this.title2 = '班级作业完成情况'
        this.title3 = '考试平均成绩'
        this.getExam()
        this.getWork()
      } else {
        this.type = 0
        this.title = '班级情况'
        this.title2 = '作业完成情况'
        this.title3 = '考试成绩'
        this.getExam()
        this.getWork()
      }
    },
    getExam () {
      var myChart = echarts.init(document.getElementById('exam'))
      var options
      if (this.type === 0) {
        options = ({
          xAxis: {
            type: 'category',
            data: ['第一次测验', '第二次测验', '第三次测验', '第四次测验']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [88, 66, 100, 50],
              type: 'bar'
            }
          ]
        })
      } else {
        options = ({
          xAxis: {
            type: 'category',
            data: ['第一次测验', '第二次测验', '第三次测验', '第四次测验']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [50, 66, 20, 100],
              type: 'bar'
            }
          ]
        })
      }
      myChart.setOption(options, true)
    },
    getWork () {
      var myChart = echarts.init(document.getElementById('work'))
      var options
      if (this.type === 0) {
        options = ({
          xAxis: {
            type: 'category',
            data: ['第一次作业', '第二次作业', '第三次作业', '第四次作业', '第五次作业']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [50, 60, 70, 80, 90],
              type: 'bar'
            }
          ]
        })
      } else {
        options = ({
          xAxis: {
            type: 'category',
            data: ['第一次作业', '第二次作业', '第三次作业', '第四次作业', '第五次作业']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [35, 28, 60, 60, 60],
              type: 'bar'
            }
          ]
        })
      }
      myChart.setOption(options, true)
    },
  }
}
</script>

<style>
.box {
  width: 700px;
  height: 500px;
  margin-left: 20%;
}
.title {
  font-size: 18px;
  margin: 20px 0 0 20px;
}
.button {
  float: right;
}
</style>
